<template>
  <el-menu
    mode="vertical"
    router
    :collapse="isCollapse"
    :collapse-transition="false"
  >
    <el-menu-item index="project" :route="{ name: 'project' }">
      <el-icon><Files></Files></el-icon>
      <template #title> 项目管理 </template></el-menu-item
    >
    <el-menu-item index="module" :route="{ name: 'module' }">
      <el-icon><FolderOpened></FolderOpened></el-icon>
      <template #title> 模块管理 </template>
    </el-menu-item>

    <el-menu-item index="run" :route="{ name: 'run' }">
      <el-icon><VideoPlay></VideoPlay></el-icon>
      <template #title> 运行项目 </template></el-menu-item
    >
    <el-menu-item index="report" :route="{ name: 'result' }">
      <el-icon><TrendCharts></TrendCharts></el-icon>
      <template #title> 结果报告 </template></el-menu-item
    >
    <el-menu-item index="keywords" :route="{ name: 'keywords' }">
      <el-icon><Key></Key></el-icon>
      <template #title> 关键字信息 </template>
    </el-menu-item>
    <el-menu-item index="notice" :route="{ name: 'notice' }">
      <el-icon><ChatLineRound></ChatLineRound></el-icon>
      <template #title> 通知消息 </template>
    </el-menu-item>
    <el-menu-item index="mail" :route="{ name: 'mail' }">
      <el-icon><Message></Message></el-icon>
      <template #title> 邮件通知 </template>
    </el-menu-item>
    <el-menu-item index="quartzTask" :route="{ name: 'quartzTask' }">
      <el-icon><Clock></Clock></el-icon>
      <template #title> 定时任务 </template>
    </el-menu-item>
    <el-menu-item index="user" :route="{ name: 'user' }">
      <el-icon><User></User></el-icon>
      <template #title> 用户信息 </template>
    </el-menu-item>
  </el-menu>
  <el-icon
    class="expand-icon"
    :size="25"
    v-show="isCollapse"
    @click="isCollapse = false"
    ><Expand
  /></el-icon>
  <el-icon
    class="expand-icon"
    :size="25"
    v-show="!isCollapse"
    @click="isCollapse = true"
    ><Fold
  /></el-icon>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import {
  Key,
  Files,
  Expand,
  Fold,
  FolderOpened,
  VideoPlay,
  TrendCharts,
  Message,
  ChatLineRound,
  Clock,
  User,
} from "@element-plus/icons-vue";
const isCollapse = ref(false);
defineExpose({ isCollapse });
</script>

<style scoped>
.el-menu {
  --el-menu-bg-color: #97d9e1 100%;
}

.expand-icon {
  position: fixed;
  bottom: 5px;
  left: 18px;
  color: #409eff;
}
</style>
